<template>
  <el-input v-model="filterNum" :placeholder="$t(`global.search`)" :prefix-icon="Search" @input="getGoodsListAll">
    <template #suffix>
      <FullScreen style="width: 30rpx;" color="#000" @click.stop="scanProduct" id="scan" />
    </template>
  </el-input>
  <el-table v-loading="loading" :data="goodsList" ref="proListRef" @selection-change="handelSelect"
    :show-overflow-tooltip="true" @row-click="rowClick" height="80vh" class="image-table">
    <el-table-column type="selection" width="30" />
    <el-table-column v-for="(item, index) in proCol" :key="index" :label="$t(item.label)" :width="item.width">
      <template #default="scope">
        <view @click.stop v-if="item.prop === 'coverpath'">
          <el-image :preview-src-list="[scope.row.coverpath]" :src="scope.row.coverpath" style="width: 50px; height: 50px"
            :z-index="10" />
        </view>
        <view @click.stop style="display: flex" v-else-if="item.prop === 'goodsFiles'">
          <view v-for="(item, index) in scope.row.goodsFiles" :key="index">
            <el-popover placement="top-start" :title="item.fileName" :width="200" trigger="hover">
              <el-image v-if="item.fileName.endsWith('jpg') ||
                item.fileName.endsWith('png') ||
                item.fileName.endsWith('jpeg')
                " :src="item.filePath" style="width: 150px; height: 150px" />
              <el-image v-else :src="fileImage" style="width: 150px; height: 150px" />
              <template #reference>
                <el-image v-if="item.fileName.endsWith('jpg') ||
                  item.fileName.endsWith('png') ||
                  item.fileName.endsWith('jpeg')
                  " :src="item.filePath" :preview-src-list="[item.filePath]"
                  style="width: 50px; height: 50px; margin-right: 5px" :preview-teleported="true" />
                <el-image v-else :src="fileImage" style="width: 50px; height: 50px; margin-right: 5px" />
              </template>
            </el-popover>
          </view>
        </view>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
  <el-row type="flex" justify="center" style="margin-top: 20px">
    <!-- <el-button type="primary" @click="showProAdd">添加商品</el-button> -->
    <el-button type="primary" @click="confirmProSelect">{{ $t(`global.verify`) }}</el-button>
    <el-button @click="closeProList">{{ $t(`global.cancel`) }}</el-button>
  </el-row>
</template>

<script setup lang="ts">
import { Close, Search, FullScreen } from '@element-plus/icons-vue'
import { ref } from 'vue'
import type { TableInstance } from 'element-plus'
import * as productApi from '@/service/api/hkb/product/index'

import { DICT_TYPE } from '@/utils/dict'
import type { goodsVO } from '../../types'
import fileImage from '@/static/images/file.png'
import { Navigate } from '@/utils';
import Storage from "@/modal/useStorage";
import { useI18n } from "vue-i18n" // 使用vue-i18n的useI18n方法

const proCol = ref([
  { label: 'ProductFrom.productName', prop: 'goods', width: '' },
  { label: 'ProductFrom.specification', prop: 'specification', width: '' },
  { label: 'ProductFrom.accessory', prop: 'goodsFiles', width: '' },
  { label: 'ProductFrom.coverpath', prop: 'coverpath', width: '' }
])
const loading = ref(false) // 列表的加载中
const showProList = ref(false) //展示商品列表
const pSelect = ref<goodsVO[]>([]) //临时选中
const goodsList = ref<goodsVO[]>()
const proListRef = ref<TableInstance>()
const filterNum = ref('')
const selectGoods = ref()
const getGoodsListAll = async () => {
  loading.value = true
  const res = await productApi.getListAll({ number: filterNum.value })
  goodsList.value = res.filter(
    (e: goodsVO) => selectGoods.value.findIndex((m: goodsVO) => m.id === e.id) < 0
  )
  loading.value = false
}
//关闭商品列表
const closeProList = () => {
  Navigate.back()
}
//商品选择
const handelSelect = (selection: goodsVO[]) => {
  pSelect.value = selection
}
//监听row-click事件，实现选中
const rowClick = (row: goodsVO) => {
  const refsElTable = proListRef.value // 获取表格对象
  let findRow = pSelect.value!.find((c) => c.id === row.id) //找到选中的行
  refsElTable?.toggleRowSelection(row, findRow ? false : true)
}

const confirmProSelect = () => {
  selectGoods.value = selectGoods.value.concat(pSelect.value)
  filterNum.value = ''
  Storage.set('selectGoods', selectGoods.value)
  Navigate.back()
}

const scanProduct = () => {
  uni.webView.postMessage({
    data: 'pages/hkb/components/proList/choseProduct'
  })
}
onMounted(() => {
  selectGoods.value = Storage.get('selectGoods')
  getGoodsListAll()
})
onShow((e) => {
  const pages = getCurrentPages();
  filterNum.value = pages[pages.length - 1].$page.options.goodsnum
  if (pages[pages.length - 1].$page.options.goodsnum) {
    getGoodsListAll()
  }
})
</script>
<style scoped lang="scss">
::v-deep .el-loading-mask {
  z-index: 1 !important;
}
</style>